<!--  -->
<template>
  <div class="login">
    <div class="container">
      <el-carousel height="420px">
        <el-carousel-item>
          <img src="@/assets/images/sw.jpg" alt>
        </el-carousel-item>
      </el-carousel>
      <div class="login-form">
        <div class="title">
          <img src="@/assets/images/logo.png" alt>
          <span>好谷大神后台管理系统</span>
        </div>
        <el-form :model="loginData" :rules="loginRules" ref="ruleForm">
          <el-form-item label prop="username">
            <el-input v-model="loginData.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label prop="password">
            <el-input v-model="loginData.password" show-password placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item label class="captcha" prop="captcha">
            <el-input v-model="loginData.captcha" placeholder="验证码"></el-input>
            <img
              src="http://8.136.129.225:3000/api/users/captcha"
              ref="captcha"
              @click="changeCaptcha"
              height="40"
            >
          </el-form-item>
          <el-form-item label>
            <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { userLoginApi } from "@/api/user.js";
import { setCookie } from "@/utils/auth.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      loginData: {
        username: "",
        password: "",
        captcha: ""
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  //方法集合
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          userLoginApi(this.loginData).then(res => {
            console.log(res.data.token);
            setCookie(res.data.token);
            if (res.data.status == 200) {
              this.$router.push("/admin/");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 刷新验证码
    changeCaptcha() {
      this.$refs.captcha.src =
        "http://8.136.129.225:3000/api/users/captcha?t=" + new Date().getTime();
    }
  }
};
</script>
<style lang="less">
.h420 {
  height: 420px;
}
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  background: url(../../assets/images/bg.jpg);
  background-size: cover;
  .container {
    width: 1020px;
    .h420;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -210px 0 0 -510px;
    background: #fff;
    border-radius: 10px;
    .el-carousel {
      width: 510px;
      .h420;
      float: left;
      img {
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
      }
    }
    .login-form {
      width: 510px;
      .h420;
      float: left;
      color: #333;
      .title {
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }
        span {
          font-size: 20px;
        }
      }
      .el-form {
        width: 80%;
        margin-left: 10%;
        .captcha {
          .el-form-item__content {
            display: flex;
          }
        }
      }
    }
  }
}
</style>